﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>编辑用户</title>
		<link rel="stylesheet"
			href="/static/css/table.css" type="text/css"/>
		<script type="text/javascript" src="/static/javascript/jquery-1.7.2.js"></script>
		<script type="text/javascript"
			src="/static/javascript/jquery.messager.js"></script>
		<script type="text/javascript" src="/static/javascript/user_add.js"></script>
		<!--以下3个js库必须按照顺序引入-->
		<!--vue脚本库-->
		<script type="text/javascript"
				src="/static/js/vue-3.2.4.global.js">
		</script>
		<script type="text/javascript"
				src="/static/js/axios-0.18.0.min.js">
		</script>
		<!--我们自己封装的axios函数库 -->
		<script type="text/javascript"
				src="/static/js/axios-helper.js">
		</script>
	</head>
	<body id="app">
		<form id="powerAction!doModifyUser" name="powerAction!doModifyUser"  method="post">
			<table width="100%">
				<tr>
					<td>
						<font color="black">您正在做的业务是：人力资源--权限管理--编辑用户</font>
					</td>
				</tr>
				<tr>
					<td align="right">
						<input type="button" @click="update(user.uid)"  value="修改" class="BUTTON_STYLE1"/>
						<input type="button" value="返回" class="BUTTON_STYLE1" onclick="history.back()">
					</td>
				</tr>
			</table>
			<table width="100%" border="1" cellpadding=3 cellspacing=1
				bordercolorlight=#848284 bordercolordark=#eeeeee
				class="TABLE_STYLE1">
				<tr>
					<td class="TD_STYLE1">用户名称</td>
					<td class="TD_STYLE2">
						<input type="text" v-model="user.uname" />
						<input type="hidden"  v-model="user.uid"/>
					</td>
					<td class="TD_STYLE1">用户密码</td>
					<td class="TD_STYLE2">
						<input type="password" v-model="user.upassword" disabled="disabled"/>
					</td>
				</tr>
				<tr>
					<td class="TD_STYLE1">真实姓名</td>
					<td class="TD_STYLE2">
						<input type="text" v-model="user.utrueName"/>
					</td>
					<td class="TD_STYLE1">用户身份</td>
					<td class="TD_STYLE2">
						<select v-model="user.rid">
							<option v-for="role in roleList" :value="role.rid">{{role.rname}}</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
	</body>
	<script type="module">
		Vue.createApp({
			data(){
				return{
					//角色列表
					roleList:[],
					user:{
						uid:null,
						uname:null,
						utrueName:null,
						upassword:null,
						rid:null
					}
				}
			},
			created(){
				requestGet("/role/queryAll").then((data)=>{
					console.info("查询全部角色对象：",data);
					this.roleList=data.records;
				}),
				requestGet("/users/queryById",{
					uid:sessionStorage.getItem("id")
				}).then((data)=>{
					console.info("单值查询得到的对象：",data);
					this.user=data;
				})
			},
			methods:{
				update(uid){
					requestPostman("/users/save",this.user).then((data)=>{
						if(data.statusCode==1){
							// alert("修改成功");
							window.location.href = "/templates/page/power/success.html";
						}else{
							alert("修改失败");
						}
					})
				}
			}

		}).mount("#app");
	</script>
</html>
